<template>
	<vCommonPage type="1" title="价格查询" class="jgcx">
		<div slot="customContent" class="contentX  speH">
			<div class="jgcxTitle ">
				<div class="jgcxTitleCenter">检验项目价格</div>
			</div>
			<div class="tableBox">
				<el-table class="table" :header-cell-style="$tableTitleStye" :cell-style="{color:'#435C7A'}"
					:data="objList" style="width: 100%;font-size: 2.028571rem;font-weight: 400;text-align: center;"
					:show-overflow-tooltip="true">
					<el-table-column type="index" :index="indexMethod" label="序号" width="80"></el-table-column>
					<el-table-column prop="itemName" label="项目名称"></el-table-column>
					<el-table-column prop="unit" label="单位"></el-table-column>
					<el-table-column prop="chargeName" label="费用类型"></el-table-column>
					<el-table-column prop="price" width="230" label="单价(元)"></el-table-column>
				</el-table>
			</div>
			<div class="bottomBox" style="display: flex; justify-content: space-between;">
				<div style="display: flex;">
					<el-button type="primary" class="BtnTextHome" @click="goBack()">返回</el-button>
					<el-button type="primary" class="BtnTextHome" @click="goBackHome()">首页</el-button>
				</div>
				<div>
					<el-button type="success" class="BtnTextGreen marl" @click="search()">搜索</el-button>
				</div>

			</div>
			<vAbcKeyBoard v-if="keyBoardInShow" ref="keyBoard" @closeKeyBoard="closeKeyBoard" @searchData="searchData"
				:inputValue="name" :placeholder="placeholder"></vAbcKeyBoard>
			<choseTypeBox :choseTypeBoxShow="choseTypeBoxShow" @closeEmit="closeEmit" @typeBoxClick="typeBoxClick"
				:projectList="projectList"></choseTypeBox>
			<div v-if="keyBoardInShow" class="yiny" @click="closeKeyBoard()"></div>
		</div>
		
	</vCommonPage>
</template>

<script>
	import {
		getAllChargeTypeList
	} from "@api/apiBox/jgcx"
	import choseTypeBox from "./choseTypeBox.vue"
	import {
		//检查/检验项目查询
		getItemsInfo,
		//药品价格
		getAllChargeItemList
	} from "@api/apiBox/jgcx"
	export default {
		name: "jgcx",
		components: {
			choseTypeBox
		},
		data() {
			return {
				clickOrdinary: true,
				objList: [], //产品
				clickOne: true,
				keyBoardInShow: false,
				name: '',
				placeholder: '请输入药品名称的拼音首字母',
				choseTypeBoxShow: false,
				projectList: [],
				chargeId:''
			}
		},
		methods: {
			indexMethod(index) {
				return index + 1;
			},
			styleObj() {
				return {
					color: '#435c7a',
					background: '#EAF4F9',
					opacity: '0.61',
					fontWeight: 800
				};
			},
			//打开搜索框
			search() {
				this.keyBoardInShow = true;
			},
			closeKeyBoard() {
				this.keyBoardInShow = false;
			},
			searchData(nameStr) {
				this.searchAllByName(nameStr);
				this.keyBoardInShow = false;
			},
			clickPrjSort() {
				this.choseTypeBoxShow = true;
			},
			closeEmit() {
				this.choseTypeBoxShow = false;
			},
			typeBoxClick(item) {
				console.log('item', item)
				this.searchAll(item);
				this.choseTypeBoxShow = false;
			},
			async init() {
				let data = {
					data: {},
					that: this
				}
				const res = await getAllChargeTypeList(data);
				this.projectList = res.data;
			},
			//查询价格
			async searchAll(item) {
				let data = {
					data: {
						chargeId: item.chargeId
					},
					that: this
				}
				const res = await getAllChargeItemList(data);
				this.objList = res.data;
			},
			//查询价格
			async searchAllByName(itemName) {
				let data = {
					data: {
						itemName: itemName,
						chargeId: this.chargeId	
					},
					that: this
				}
				const res = await getAllChargeItemList(data);
				this.objList = res.data;
			}
		},
		created() {
			this.init();
			if (this.$route.query.data) {
				let data = JSON.parse(this.$route.query.data);
				this.chargeId = data.chargeId;
				this.searchAll(data);
			}

		}
	}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	.proName {
		width: 11.25rem;
		height: 6.375rem;
		background: #FFFFFF;
		border: 1px solid #46C349 !important ;
		box-shadow: 0px 0.0625rem 1.6875rem 0px rgba(42, 103, 177, 0.09);
		border-radius: 0.5rem;
		font-size: 2vw;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #46C349;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.proName:active {
		background-color: #46C349;
		color: #FFFFFF;
	}

	.jgcxTitleCenter {
		font-size: 3vw;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #435C7A;
		display: flex;
		align-items: center;
		width: 100%;
		justify-content: center;
		text-align: center;
	}

	.jgcxTitle {
		display: flex;
		width: 100%;
	}

	.typeChoseBox {
		display: flex;
		justify-content: center;
		font-size: 3vw;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #435C7A;
		margin-top: 20px;
	}

	.leftBox {
		width: 30%;
		text-align: center;
	}

	.leftBoxBottom::after {
		content: '';
		width: 40%;
		height: 8px;
		border-radius: 4px;
		display: block;
		margin: 0 auto;
		background: #57A8FF;
		margin-top: 10px;
	}

	.rhightBoxBottom::after {
		content: '';
		width: 40%;
		display: block;
		margin: 0 auto;
		background: #57A8FF;
		height: 8px;
		border-radius: 4px;
		margin-top: 10px;
	}

	.rhightBox {
		width: 30%;
		text-align: center;
	}

	.blue {
		color: #57A8FF;
	}

	.tableBox {
		margin-top: 30px;
		height: 540px;
		padding: 10px;
		overflow-y: auto;
		overflow-x: hidden;
		scroll-behavior: smooth;
		border-radius: 8px;
		overscroll-behavior: contain;
		border-radius: 8px 8px 0px 0px;
	}

	.mrR {
		margin-right: 600px;
	}

	.marl {
		margin-left: 590px !important;
	}

	.jgcx {
		width: 100%;
	}

	@media (min-height: 0px) and (max-height: 1910px) {
		.speH {
			height: 40.4375rem;
			width: 100%;
		}
	}

	@media (min-height: 1919px) {
		.speH {
			height: 100%;
			width: 100%;
		}
	}
</style>

<style>
	.jgcx .tableBox {
		height: 500px !important;

	}
</style>
